const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = (env) => {
  console.log(process.env.url);

  return {
    entry: "./src/index.js",

    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            MiniCssExtractPlugin.loader,
            "css-loader",
            "postcss-loader",
            "sass-loader",
            // sass
          ],
        },
      ],
    },

    devtool: env.production ? "hidden-source-map" : "inline-source-map",
    output: {
      filename: "bundle.js",
      path: path.resolve(__dirname, "dist"),
      clean: true
    },

    plugins: [
      // 生成 html文件
      new HtmlWebpackPlugin({
        title: "管理输出",
        template: "./src/index.html",
      }),

      //  生成 css文件
      new MiniCssExtractPlugin({
        // 定义打包后的css文件名，默认为main.css
        // 每次打包重命名资源，可以防止客户端缓存
        filename: "css/[name]-[hash:8].css",
      }),
    ],
    devServer: {
      static: {
        //  托管的静态资源目录
        directory: path.join(__dirname, "dist"),
      },
      compress: true, // gzip压缩
      port: 9000, // 指定端口
      open: true, // 自动打开浏览器,
      hot: true, // 实现热替换,如改变了样式，页面实时更新。而无需重新刷新整个页面
    },
  };
};
